//定义主题
$themes: (
	blue: (
		font_color: rgb(64, 158, 255),
		background_dark: rgba(64, 158, 255, 1),
		background_light: rgba(64, 158, 255, 0.8),
		background_transparent: rgba(64, 158, 255, 0.1),
		box_shadow: rgba(64, 158, 255, 0.8),
		border: rgba(64, 158, 255, 0.8)
	),
	black: (
		font_color: rgb(6, 6, 6),
		background_dark: rgb(3, 3, 3, 1),
		background_light: rgba(3, 3, 3, 0.8),
		background_transparent: rgba(3, 3, 3, 0.1),
		box_shadow: rgba(3, 3, 3, 0.8),
		border: rgba(3, 3, 3, 0.8)
	),
	pink: (
		font_color: rgb(250, 109, 132),
		background_dark: rgb(248, 89, 116),
		background_light: rgba(248, 89, 116, 0.8),
		background_transparent: rgba(248, 89, 116, 0.1),
		box_shadow: rgba(248, 89, 116, 0.8),
		border: rgba(248, 89, 116, 0.8)
	),
	purple: (
		font_color: rgb(202, 91, 247),
		background_dark: rgb(198, 72, 252),
		background_light: rgba(198, 72, 252, 0.8),
		background_transparent: rgba(198, 72, 252, 0.1),
		box_shadow: rgba(198, 72, 252, 0.8),
		border: rgba(198, 72, 252, 0.8)
	)
);

//遍历
@mixin themeify {
	@each $theme-name, $theme-map in $themes {
		$theme-map: $theme-map !global;
		//这步是判断html的 自定义属性 data-theme的值  #{}是sass的插值表达式
		//& sass嵌套里的父容器标识   @content是混合器插槽，像vue的插槽一样
		[data-theme='#{$theme-name}'] & {
			@content;
		}
	}
}

//声明一个根据Key获取颜色的function
@function themed($key) {
	@return map-get($theme-map, $key);
}

//获取背景颜色
@mixin background_color($color, $important: null) {
	@include themeify {
		background-color: themed($color) $important;
	}
}

//获取渐变颜色
@mixin linear_gradient($position: to bottom) {
	@include themeify {
		background-image: linear-gradient(
			$position,
			themed(background_dark),
			themed(background_light)
		);
	}
}

//获取字体颜色
@mixin font_color($color, $important: null) {
	@include themeify {
		color: themed($color) $important;
	}
}

//获取边框颜色
@mixin border_color($color, $important: null) {
	@include themeify {
		border-color: themed($color) $important;
	}
}

//获取阴影颜色
@mixin shadow_color($color, $important: null) {
	@include themeify {
		box-shadow: themed($color) $important;
	}
}
